﻿@page "/users"
@attribute [TabItemOption(Text = "花名册")]
<PageTitle>花名册</PageTitle>

<h1>花名册</h1>

<p>只读数据 - 更改每页显示数量体验固定表头功能</p>

<Table TItem="Foo" IsPagination="true" PageItemsSource="@PageItemsSource" RenderMode="TableRenderMode.Table" IsFixedHeader="true" class="table-users"
       IsStriped="true" IsBordered="true" OnQueryAsync="OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.Name" Width="260">
            <Template Context="value">
                <div class="d-flex">
                    @{
                        var row = (Foo)value.Row;
                    }
                    <div>
                        <img src="@GetAvatarUrl(row.Id)" />
                    </div>
                    <div class="ps-2">
                        <div>@value.Value</div>
                        <div class="user-demo-address">@row.Address</div>
                    </div>
                </div>
            </Template>
        </TableColumn>
        <TableColumn @bind-Field="@context.Address" />
        <TableColumn @bind-Field="@context.Education" Align="Alignment.Center" Width="80" />
        <TableColumn @bind-Field="@context.Count" Width="160">
            <Template Context="value">
                <div class="w-100">
                    <div>@value.Value %</div>
                    <div>
                        <Progress Value="@value.Value" Color="@GetProgressColor(value.Value)"></Progress>
                    </div>
                </div>
            </Template>
        </TableColumn>
        <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" Width="80" />
    </TableColumns>
</Table>
